<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/common.css" type="text/css">
</head>

<body>
    <div id="app">

        <ul>
            <li v-for="(book,index) in booksSort">{{index+1}}-{{book.sum}} - {{book.name}} </li>
        </ul>
        <ul>
            <li v-for="(u,key,index) in user">{{index+1}}- {{key}}- {{u}}</li>
        </ul>
        <div :class="[isActive ?  activeCls : '', errorCls]"></div>
        <div :class="classes"></div>
        <div class="static" :class="{'active':isActive, 'error':isError}"></div>
        <img :src="imgUrl">
        <div class="color num"> </div>
        <div :style="stycss"> 孩子</div>
        <template v-if="status === 1">
            <p v-show >status 为1显示</p>
        </template>
        <template v-else-if="status === 2">
            <p >status 为2显示</p>
        </template>
        <template v-else>
            <p >否则显示</p>
        </template>
      
        
        

    </div>

    <script src="https://unpkg.com/vue/dist/vue.min.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                status:1,
                activeCls: 'active',
                errorCls: 'error',
                isActive: true,
                isError: false,
                error: null,
                imgUrl: "u=1539816938,3284839683&fm=214&gp=0.jpg",
                stycss: {
                    color: 'green',
                    fontSize: '30px',
                    background: 'red'
                },
                user:{
                    name:"ll",
                    pwd:"123456",
                    age:26
                },
                books:[
                    {name:'《a狼图腾》',sum:"30"},
                    {name:'《b三国演义》',sum:"15"},
                    {name:'《c爱》',sum:"28"},
                ]
            },
            computed: {
                classes: function () {
                    return {
                        ective: this.isActive && !this.error,
                        'text-fail': this.error && this.error.type === 'fail'
                    }
                },
                books:function(){
                    return this.books.filter(function (book){
                        return book.name.match(/a/)

                    });
                },
                booksSort :function(){
                    return this.books.sort(function(a,b){
                        return a.name.length-b.name.length;                    
                    });
                }
            }
        })
    </script>

</body>

</html>